<template>
    <view class="container">
        <!-- 顶部导航 -->
        <view class="header">
            <view class="back-btn">←</view>
            <text class="title">每日单词背诵</text>
        </view>

        <!-- 搜索栏 -->
        <view class="search-bar">
            <uni-search-bar placeholder="搜索单词" @confirm="filterWords" />
        </view>

        <!-- 单词卡片 -->
        <view class="word-card">
            <view class="word-header">
                <text class="word">{{currentWord.word}}</text>
                <text class="phonetic">{{currentWord.phonetic}}</text>
            </view>
            <text class="translation">{{currentWord.translation}}</text>
            <image class="sound-icon" src="/static/sound.png" @click="playSound"></image>
            <!-- 原有卡片内容保持不变 -->
            <!-- 新增笔记区域 -->
            <view class="notes-section">
                <textarea class="note-input" placeholder="添加笔记" v-model="currentNote"></textarea>
                <button class="btn collect" @click="toggleCollect">
                    {{ isCollected ? '★ 已收藏' : '☆ 收藏' }}
                </button>
            </view>
        </view>

        <!-- 操作按钮 -->
        <view class="action-buttons">
            <button 
  class="btn mastered" 
  :class="{
    'mastered-active': masteredWords.includes(currentIndex), 
    'unmastered-state': !masteredWords.includes(currentIndex)
  }" 
  @click="markAsMastered"
>
  {{ masteredWords.includes(currentIndex) ? '已掌握' : '未掌握' }}
</button>
            <button class="btn next" @click="nextWord">下一个</button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            title: '好记单词', // 页面标题
            words: [
                {
                    word: 'Hello',
                    phonetic: '/həˈləʊ/',
                    translation: 'int. 你好',
                    audio: 'hello.mp3'
                },
                {
                    word: 'World',
                    phonetic: '/wɜːrld/',
                    translation: 'n. 世界',
                    audio: 'world.mp3'
                },
                {
                    word: 'UniApp',
                    phonetic: '/ˈjuːniæp/',
                    translation: 'n. 跨平台应用',
                    audio: 'uniapp.mp3'
                }
            ],
            currentIndex: 0,
            currentWord: {},
            masteredWords: []
        }
    },
    methods: {
        playSound() {
            // 播放单词发音
            const innerAudioContext = uni.createInnerAudioContext();
            innerAudioContext.src = this.currentWord.audio;
            innerAudioContext.play();
        },
        markAsMastered() {
            if (!this.masteredWords.includes(this.currentIndex)) {
                this.masteredWords.push(this.currentIndex);
                uni.showToast({ title: '标记为已掌握', icon: 'success' });
            } else {
                this.masteredWords = this.masteredWords.filter(i => i !== this.currentIndex);
                uni.showToast({ title: '标记为未掌握', icon: 'success' });
                // 移除nextWord调用
            }
        },
        nextWord() {
            let newIndex = this.currentIndex;
            let attempt = 0;
            
            do {
                newIndex = (newIndex + 1) % this.words.length;
                attempt++;
            } while (this.masteredWords.includes(newIndex) && attempt <= this.words.length);

            this.currentIndex = newIndex;
            this.currentWord = this.words[this.currentIndex];
        }
    }
}
</script>

<style>
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100vh;
}

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin: 50rpx auto; /* 调整logo边距，留出更多空间给单词内容 */
    }

    .text-area {
        display: flex;
        justify-content: center;
        margin-bottom: 30rpx;
    }

    .title {
        font-size: 36rpx;
        color: #333; /* 标题颜色加深，更明显 */
    }

    /* 以下样式从App.vue迁移，确保单词卡片等元素样式生效 */
    .container {
        padding: 20rpx;
        width: 100%;
        background-color: #f5f5f5;
    }

    .header {
        display: flex;
        align-items: center;
        padding: 20rpx;
        background: #fff;
        border-radius: 16rpx;
        margin-bottom: 30rpx;
    }

    .word-card {
        background: #fff;
        border-radius: 24rpx;
        padding: 40rpx;
        box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.1);
        margin-bottom: 40rpx;
        position: relative;
    }

    .word-header {
        display: flex;
        align-items: baseline;
        margin-bottom: 20rpx;
    }

    .word {
        font-size: 48rpx;
        font-weight: bold;
        margin-right: 20rpx;
    }

    .phonetic {
        color: #666;
        font-size: 32rpx;
    }

    .translation {
        font-size: 36rpx;
        color: #333;
    }

    .sound-icon {
        width: 60rpx;
        height: 60rpx;
        position: absolute;
        right: 40rpx;
        top: 40rpx;
    }

    .action-buttons {
        display: flex;
        gap: 20rpx;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0 20rpx;
    }

    .btn {
        width: 200rpx;
        margin: 0;
    }

    .collect {
        order: 1;
        background: #fff0f5;
        border: 1rpx solid #2527ad;
    }

    .mastered {
        order: 2;
        background: #e8f5e9;
        border: 1rpx solid #4caf50;
    }

    .next {
        order: 3;
        background: #2196f3;
    }
</style>



<style>
/* 合并所有样式 */
.container {
    background-color: #f8f9fa;
    padding: 20rpx 15rpx;
    font-family: Arial, sans-serif;
}

.title {
    color: #212529;
    font-size: 40rpx;
}

.word-card {
    margin: 20rpx 0;
    transition: all 0.3s ease;
}

.notes-section {
    margin-top: 30rpx;
    display: flex;
    flex-direction: column;
    gap: 20rpx;
}

.uni-search-bar {
    background: #ffffff !important;
    border-radius: 40rpx !important;
}

.uni-grid-item {
    padding: 10rpx;
}
.search-bar {
    margin-bottom: 20rpx;
}

.note-input {
    width: 100%;
    padding: 20rpx;
    border: 1rpx solid #dee2e6;
    border-radius: 8rpx;
    margin: 20rpx 0;
    font-family: Arial, sans-serif;
}

.action-grid {
    margin-top: 30rpx;
}

.btn:active {
    transform: scale(0.95);
    transition: transform 0.2s;
}

.header {
    background: #2196F3 !important;
    color: white;
}

.word-header {
    flex-direction: column;
    align-items: flex-start;
    margin: 20rpx 0;
}

.translation {
    display: flex;
    flex-direction: column;
    gap: 10rpx;
}

.part-of-speech {
    color: #666;
    font-weight: bold;
}

.collect {
    position: fixed;
    bottom: 200rpx;
    right: 40rpx;
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    padding: 0;
}

.mastered {
    
    border-radius: 40rpx;
}
.unmastered-state {
  background: white !important;
  color: #333 !important;
  border: 1rpx solid #ccc !important;
}

.mastered-active {
  background: #4CAF50 !important;
  color: white !important;
  border-color: #4CAF50 !important;
}

.next {
    border-radius: 40rpx;
}

.note-input {
    border-radius: 20rpx;
    padding: 15rpx;
}
</style>